// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Grid, Image } from "@nutui/nutui-react-taro";
import HeaderTitle from "@/components/HeaderTitle";
import balanceIcon from '@/assets/balance.png'
import orderIcon from '@/assets/icon_order.png'
import myIcon from '@/assets/icon_my.png'

interface GridItem {
  id: number;
  text: string;
  icon: any;
  path?: string;
}

const Index: React.FC = () => {
  const [gridList, setGridList] = useState<GridItem[]>([
    {
      id: 1,
      text: "手动储值",
      icon: balanceIcon // 替换为实际图标地址
    },
    {
      id: 2,
      text: "手动消费",
      icon: balanceIcon
    },
    {
      id: 3,
      text: "会员列表",
      icon: myIcon
    },
    {
      id: 4,
      text: "订单列表",
      icon: orderIcon
    },
  ]);

  const handleGridClick = (item: GridItem) => {
    console.log('点击了:', item.text);
    // 这里可以添加跳转逻辑
    // switch(item.id) {
    //   case 1:
    //     Taro.navigateTo({ url: '/pages/recharge/index' });
    //     break;
    //   case 2:
    //     Taro.navigateTo({ url: '/pages/consumption/index' });
    //     break;
    //   // ... 其他跳转
    // }
  };

  return (
    <View className="pageContainer">
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'管理后台'} />
      </View>
      <Grid columns={3} gap={10}>
        {gridList.map(item => (
          <Grid.Item
            key={item.id}
            text={item.text}
            onClick={() => handleGridClick(item)}
          >
            <Image
              src={item.icon}
              width="25px"
              height="25px"
              mode="aspectFit"
            />
          </Grid.Item>
        ))}
      </Grid>
    </View>
  )
}

export default Index
